'use client'

import { useEffect, useState } from 'react'

interface NotificationProps {
  message: string
  type: 'success' | 'error'
  onClose: () => void
}

export default function Notification({ message, type, onClose }: NotificationProps) {
  const [isFadingOut, setIsFadingOut] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFadingOut(true)
    }, 3000)

    return () => clearTimeout(timer)
  }, [])

  const handleAnimationEnd = () => {
    if (isFadingOut) {
      onClose()
    }
  }

  return (
    <div
      onAnimationEnd={handleAnimationEnd}
      className={`fixed top-5 left-1/2 -translate-x-1/2 z-[60] p-4 rounded-lg shadow-lg text-white ${isFadingOut ? 'animate-fade-out-up' : 'animate-fade-in-down'} ${type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
      <span>{message}</span>
      <button onClick={() => setIsFadingOut(true)} className="ml-4 font-bold">
        &times;
      </button>
    </div>
  )
}